<!-- BEGIN main -->
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Team102 Private Homepage</title>
    <meta name="viewport" content="initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,width=device-width,height=device-height,target-densitydpi=device-dpi,user-scalable=yes" />
<!--    <link rel="stylesheet" href="stylesheet.css" /> -->
	<style type="text/css">
	body {
	background-image: url("Geary.jpg");
	background-repeat: repeat;
	background-color: #222;
	background-attachment: fixed;
	}
	.header{
	display: flex;
	flex-direction:row-reverse;
	flex-wrap: wrap;
	align-content: space-between;
	}
	.description{
	max-width: 800px;
	padding: 15px 10px 17px 25px;
    border: 25px;
    margin: 15px 15px 15px 15px;
	order: 2;
	align-self: flex-end;
	flex-grow: 5;
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
	font-weight: 300;
	color: d5d5d8;
	background-color: #222;
	border-radius: 16px;
	}
	.field{
	margin: 15px 4px 0px 15px;
	}
	.nav {
	<background-image: url("semitransparent.png");
    padding: 30px 10px 17px 25px;
    border: 25px;
    margin: 15px 15px 15px 15px;
	order: 3;
	align-self: flex-end;
	flex-grow: 3;
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
	}
	.logo {
	 width: 300px;
    padding: 25px;
    border: 25px;
    margin: 0 15 25 0px;
	order: 1;
	flex-grow: 1;
	font-size: 21px;
	color: d5d5d8;
	}
	.bigButton {
	background-color: #F7b448;
	color: 151a2e;
	height: 60 px;
	width: 102 px;
	font-size: 20px;
	margin-top: 17px;
	padding: 10px;
	border: 5px ridge #ff7e00;
	}
	.loginboxExterior{
	margin-top: 25px;
	}
	</style>
	 <script>
	var groupHighlights = [false];

function changeImage() {

        if (groupHighlights[0]===false) {
          document.getElementById("indexForm").style.background = "#ff8a19";
          document.getElementById("indexForm").style.color = "black";
          groupHighlights[0]=true;
          } else {
          document.getElementById("indexForm").style.background = "";
          document.getElementById("indexForm").style.color = "white";
          groupHighlights[0]=false;
        }
    } 
		</script>
</head>
<body class="no-js">
    <div id="page">
        <div class="header">
			<div class="logo">
				<img src="favicon.ico" style="float: right; padding: 3px 15px 20px 10px;" onclick="changeImage()"/>
				<div id="indexForm" onclick="changeImage()">
					<div id="team102" style="text-align: right"><strong>FIRST Team 102</strong></div>
					<div style="text-align: right"><strong>The Gearheads</strong></div>
					<div style="text-align: right"><strong>Somerville High School, NJ</strong></div>
				</div>
			</div>
		</div>
			
		<div class="description">
			<body>During the two minutes and thirty seconds of the game, the red and blue alliances compete to stack more totes and recycling containers on scoring platforms. 
			Each tote is worth two points, and each recycling container is worth more points the higher up it is. 
			Forty points are awarded to each alliance when both alliances work together to stack four yellow totes on the elevated platform in the center of the field, or "step."
			The pool noodles, or "litter" add value to a stack when placed inside a recycling container. 
			If litter is thrown onto the opposing alliance's side beyond the white line, the alliance that threw the litter receives four points.
			</body>
		</div>
		
		<div class=field>
			<img src="Playing-field.png">
		</div>
		
		<div class="nav">
			<a style="padding-top: 10px;padding-bottom: 10px;" class="bigButton" href="index.php" >Return to Homepage</a>
		</div>
       
    </div>
</body>
<!-- END main -->